<% import Phoenix.HTML %>
<% import Phoenix.HTML.Form %>
<% use PhoenixHTMLHelpers %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Configure Farmbot's Network </title>
    <link rel="stylesheet" href="/styles.css">
    <script type="text/javascript">
    function select_interface() {
      var selected = document.getElementsByName("interfaceRadio");
      for(var i = 0; i < selected.length; i++) {
        if(selected[i].checked) {
          document.getElementById("interface").value = selected[i].id;
          document.getElementById("interfaceSelectForm").submit();
        }
      }
    }
    function toggle_mac(id) {
      var content = document.getElementById(id);
      content.classList.contains("visible")
        ? content.classList.remove("visible")
        : content.classList.add("visible");
    }
    </script>

  </head>

  <body>
    <h1>Configure FarmBot</h1>
    <h2><%= subtitle %></h2>

    <%= if last_reset_reason
      && not String.contains?(last_reset_reason, "Soft resetting...")
      && not String.contains?(last_reset_reason, "Rebooting...")
      && not String.contains?(last_reset_reason, "Arduino factory reset")
      && not String.contains?(last_reset_reason, "Shutting down...")
      && not String.contains?(last_reset_reason, "Upgrading database...") do %>
      <div class="warning">
        <div class="warning-header">
          <img src="icon_warning.svg" />
          <h5>Configuration failed</h5>
        </div>
        <div id="warning-content">
          <script>
            var all = "<%= javascript_escape(last_reset_reason) %>";
            var reason = all.replace(/\n/g, " ").replace(/       /g, " ");
            document.write(reason)
          </script>
        </div>
      </div>
    <% end %>

    <div class="widget">
      <div class="widget-header"> <h5>Network</h5> </div>
      <div class="widget-content">
        <form class="connection-type-form" action="<%= post_action %>" id="interfaceSelectForm" method="post">
          <p>How will you connect FarmBot to the Internet?</p>
          <input id="interface" name="interface" value="" hidden/>
          <% # Main form stuff %>
          <%= for {ifname, settings} <- interfaces do %>

            <div class="connection-type no-pad">
              <input type="radio" id='<%= ifname %>' name="interfaceRadio" onclick="select_interface()"/>

              <label class="connection-type-box" for='<%= ifname %>'>
                <img src='<%= if String.contains?(to_string(ifname), "w"), do: "icon_wifi.svg", else: "icon_ethernet.svg"%>'/>
                <span><%= if String.contains?(to_string(ifname), "w"), do: "WiFi", else: "Ethernet"%></span>
              </label>

              <div class="connection-type-info" onclick='toggle_mac("mac-<%= ifname %>")'>i</div>

              <div class="connection-type-info-content" id='mac-<%= ifname %>'>
                <h4> <%= ifname %> mac address: </h4> <p><%= settings.mac_address %></p>
              </div>
            </div>

          <% end %>
        </form>
      </div>
    </div>
  </body>
</html>
